<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
         <!-- 开发环境版本，包含了有帮助的命令行警告 -->
         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
<body>
    <div id="app-2">
        <p>1+1={{ message }}</p>
        <p><span v-html="message"></span></p>
        
   </div>
   <script>
       var app2 = new Vue({
           el: '#app-2',
           data: {
             message:"<h1>h1标签</h1>"
           }
           })
    </script>
    <div id="app-1">
        <p>Original msg:"{{ msg }}"</p>
        <p>Computed reversed msg:"{{ reversedMessage  }}"</p>

        
   </div>

   <script>
       var app1 = new Vue({
        el: '#app-1',
        data: {
            msg:"100"
         },
       computed: {
        reversedMessage: function () {
        return this.msg.split('').reverse().join('')  
      }
   }
  
})
   </script>
   <div id="app-5">
       <div>{{x}}</div>
       <div>{{x1}}</div>
       <div>
          <input v-model="x"/>
       </div>
    </div>

   <script>
   var app5 = new Vue({
     el: '#app-5',
     data: {
       x:10,
       x1:100
     },
    //  computed: {
    //    x1: function () {
    //    return parseInt(this.x)*parseInt(this.x);
    //     }
       watch:{
           x:function(o){
               console.log('发生了改变'+o);
               this.x1=parseInt(o)+1
           }

       }
    
  });

   </script>
   
    <div id="app-6">
        <div>姓：{{xing}}</div>
        <div>名：{{ming}}</div>
        <div>姓名：{{name}}</div>
        <div>
            <input v-model="xing"/>
         </div>
         <div>
            <input v-model="ming"/>
         </div>
         <div>
            <input v-model="name"/>
         </div>
        
   </div>
   <script>
       var app6 = new Vue({
           el: '#app-6',
           data: {
               xing:'李',
               ming:'江龙'
           },
           computed: {
               name: {
                   get: function(){
                       return this.xing + this.ming
                   },
                   set: function(v){
                       var s = v.split('');
                       this.xing = s.shift();
                       this.ming = s.join('');
                   }
               }
           }
           })
    </script>
 
</body>
</html>